/* Discoverable vehicles and the unlocked shelter yard. */
.vehicle-field-object {
  position: absolute;
  z-index: 4;
  left: var(--vehicle-left);
  top: var(--vehicle-top);
  width: var(--vehicle-width);
  min-width: 130px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.vehicle-field-object__image {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(.84) saturate(.82) drop-shadow(0 10px 9px #000b);
  transition: filter .2s ease, transform .2s ease;
}
.vehicle-field-object__label {
  position: absolute;
  left: 50%;
  bottom: 1%;
  translate: -50% 100%;
  width: max-content;
  max-width: 180px;
  padding: 5px 8px;
  border: 1px solid #cdb66f;
  border-radius: 4px;
  background: #09120de8;
  color: #f4ebcb;
  font-size: clamp(.55rem, .8vw, .72rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, translate .18s ease;
}
.vehicle-field-object:hover .vehicle-field-object__image,
.vehicle-field-object:focus-visible .vehicle-field-object__image {
  filter: brightness(1.08) saturate(1.05) drop-shadow(0 0 3px #f5e7ad) drop-shadow(0 0 9px #cdb66f) drop-shadow(0 12px 9px #000c);
  transform: translateY(-3px);
}
.vehicle-field-object:hover .vehicle-field-object__label,
.vehicle-field-object:focus-visible .vehicle-field-object__label { opacity: 1; translate: -50% 82%; }
.vehicle-field-object:focus,
.vehicle-field-object:focus-visible { outline: none !important; }

.vehicle-encounter-modal { position: fixed; z-index: 1300; inset: 0; display: grid; place-items: center; padding: 16px; }
.vehicle-encounter-modal__backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: #020604dc; backdrop-filter: blur(5px); cursor: pointer; }
.vehicle-encounter-modal__panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(240px, .95fr) minmax(280px, 1.05fr);
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  border: 1px solid #7a704d;
  border-radius: 14px;
  background: linear-gradient(145deg, #18221a, #0c130f);
  box-shadow: 0 24px 80px #000;
}
.vehicle-encounter-modal__art { align-self: center; width: 100%; max-height: 520px; object-fit: contain; filter: drop-shadow(0 16px 14px #000c); }
.vehicle-encounter-modal__copy { padding: clamp(24px, 4vw, 48px); }
.vehicle-encounter-modal__copy h2 { margin: 4px 0 10px; color: #f2efd9; font-size: clamp(1.45rem, 3vw, 2.3rem); }
.vehicle-encounter-modal__description { margin: 0 0 22px; color: #bac5b5; line-height: 1.6; }
.vehicle-encounter-modal__close { position: absolute; z-index: 2; top: 10px; right: 10px; width: 38px; height: 38px; border: 1px solid #69755c; border-radius: 50%; background: #111a14e8; color: #fff; font-size: 1.35rem; cursor: pointer; }
.vehicle-requirements { display: grid; gap: 8px; margin-bottom: 24px; }
.vehicle-requirement { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid #5c493b; border-radius: 8px; background: #1c1814; color: #d8c8b8; }
.vehicle-requirement.is-ready { border-color: #58764c; background: #162017; color: #dcebd4; }
.vehicle-requirement__icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #7f4938; color: #fff; font-weight: 900; }
.vehicle-requirement.is-ready .vehicle-requirement__icon { background: #557747; }
.vehicle-encounter-modal__actions { display: grid; gap: 9px; }
.vehicle-encounter-modal__actions .button { width: 100%; min-height: 46px; }
.vehicle-encounter-modal__actions .button:disabled { cursor: not-allowed; opacity: .45; }

body.vehicle-yard-page-open #gameplayLayout,
body.vehicle-yard-page-open #worldMapPage,
body.vehicle-yard-page-open #worldLocationPage,
body.vehicle-yard-page-open #settlementPage,
body.vehicle-yard-page-open #basementPage { display: none !important; }
body.city-map-page-open #gameplayLayout,
body.city-map-page-open #worldMapPage,
body.city-map-page-open #worldLocationPage,
body.city-map-page-open #settlementPage,
body.city-map-page-open #basementPage,
body.city-map-page-open #vehicleYardPage { display: none !important; }
body.city-location-page-open #gameplayLayout,
body.city-location-page-open #worldMapPage,
body.city-location-page-open #worldLocationPage,
body.city-location-page-open #settlementPage,
body.city-location-page-open #basementPage,
body.city-location-page-open #vehicleYardPage,
body.city-location-page-open #cityMapPage { display: none !important; }
body.vehicle-yard-page-open,
body.city-map-page-open,
body.city-location-page-open { overflow: hidden; }
.vehicle-yard-page { position: relative; width: 100vw; max-width: none; height: 100dvh; margin: 0; overflow: hidden; }
.vehicle-yard__scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; border: 0; border-radius: 0; background: #090d0b; box-shadow: none; }
.vehicle-yard__background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.vehicle-yard__door,
.vehicle-yard__door:hover,
.vehicle-yard__door:focus-visible {
  position: absolute;
  z-index: 5;
  left: 23.22%;
  top: 38.15%;
  width: 5.12%;
  height: 19.54%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  cursor: pointer;
}
.vehicle-yard__door-map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.vehicle-yard__door-map .scene-object-shape {
  fill: rgba(224, 204, 133, .001);
  stroke: rgba(224, 204, 133, 0);
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  transition: fill .14s ease, stroke .14s ease, filter .14s ease;
}
.vehicle-yard__door:hover .scene-object-shape,
.vehicle-yard__door:focus-visible .scene-object-shape {
  fill: rgba(224, 204, 133, .12);
  stroke: rgba(236, 214, 139, .92);
  filter: drop-shadow(0 0 4px rgba(226, 204, 126, .55)) drop-shadow(0 0 12px rgba(226, 204, 126, .22));
}
.vehicle-yard__parked { position: absolute; z-index: 3; left: var(--yard-car-left); top: var(--yard-car-top); width: var(--yard-car-width); margin: 0; translate: -50% -50%; pointer-events: none; }
.vehicle-yard__parked img { display: block; width: 100%; pointer-events: none; filter: brightness(.83) saturate(.88) drop-shadow(0 11px 8px #000b); transition: filter .16s ease, transform .16s ease; }
.vehicle-yard__parked figcaption { width: max-content; margin: -2px auto 0; padding: 3px 7px; border-radius: 4px; background: #07100bcf; color: #dbe3d4; font-size: clamp(.5rem, .7vw, .68rem); pointer-events: none; }
.vehicle-yard__car-hotspot { position: absolute; z-index: 2; inset: 0 0 9%; width: 100%; padding: 0; border: 0; background: transparent; box-shadow: none; outline: none !important; cursor: pointer; pointer-events: auto; }
.vehicle-yard__parked:has(.vehicle-yard__car-hotspot:hover) img,
.vehicle-yard__parked:has(.vehicle-yard__car-hotspot:focus-visible) img,
.vehicle-yard__parked.is-active img {
  filter: brightness(1.04) saturate(.98) drop-shadow(0 0 1px rgba(255, 250, 229, .98)) drop-shadow(0 0 4px rgba(236, 231, 211, .68)) drop-shadow(0 11px 8px #000b);
  transform: translateY(-2px);
}
.vehicle-yard__car-action {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 86%;
  width: min(290px, 86vw);
  translate: -50% 0;
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(230, 218, 172, .28);
  border-radius: 10px;
  background: rgba(6, 11, 8, .93);
  box-shadow: 0 14px 34px #000c;
  backdrop-filter: blur(10px);
  pointer-events: auto;
}
.vehicle-yard__car-action[hidden] { display: none !important; }
.vehicle-yard__city-action { width: 100%; min-height: 38px; padding-inline: 14px; box-shadow: 0 10px 26px #000c; }
.vehicle-yard__city-action:disabled,
.vehicle-yard__service-action:disabled { cursor: not-allowed; opacity: .42; }
.vehicle-yard__status { display: grid; gap: 7px; }
.vehicle-yard__status-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; color: #dbe3d4; font-size: .76rem; }
.vehicle-yard__status-row.is-critical { color: #ff978c; }
.vehicle-yard__meter { position: relative; grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 999px; background: #263128; }
.vehicle-yard__meter::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--vehicle-meter); border-radius: inherit; background: #d5b959; }
.vehicle-yard__meter--condition::after { background: #80b769; }
.vehicle-yard__status-row.is-critical .vehicle-yard__meter--condition::after { background: #d75549; }
.vehicle-yard__service-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vehicle-yard__service-action { min-width: 0; min-height: 34px; padding: 6px 8px; font-size: .7rem; }
.vehicle-yard__repair-cost { color: #9faa9c; font-size: .62rem; line-height: 1.35; text-align: center; }

.city-map-page { position: relative; width: 100vw; max-width: none; height: 100dvh; margin: 0; overflow: hidden; }
.city-map-page[hidden] { display: none !important; }
.city-map__scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; border: 0; border-radius: 0; background: #090d0b; box-shadow: none; }
.city-map__background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.city-map__hotspots { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; }
.city-map__hotspot { fill: rgba(246, 241, 224, .001); stroke: rgba(246, 241, 224, 0); stroke-width: 1.8; vector-effect: non-scaling-stroke; cursor: pointer; outline: none; transition: stroke .14s ease, filter .14s ease; }
.city-map__hotspot:focus,
.city-map__hotspot:focus-visible { outline: none !important; }
.city-map__hotspot:hover,
.city-map__hotspot:focus-visible { fill: rgba(246, 241, 224, .001); stroke: rgba(246, 241, 224, .94); filter: drop-shadow(0 0 3px rgba(246, 241, 224, .5)) drop-shadow(0 0 8px rgba(0, 0, 0, .7)); }
.city-map__back { position: absolute; z-index: 5; top: max(14px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); min-height: 40px; background: rgba(8, 13, 10, .82); box-shadow: 0 8px 24px #0009; backdrop-filter: blur(6px); }

.city-location-page { position: relative; width: 100vw; max-width: none; height: 100dvh; margin: 0; overflow: hidden; }
.city-location-page[hidden] { display: none !important; }
.city-bar__scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; border: 0; border-radius: 0; background: #090d0b; box-shadow: none; }
.city-bar__artboard {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  transform: translate(-50%, -50%);
}
.city-bar__background { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.city-bar__bartender-map { z-index: 2; }
.city-bar__bartender-hotspot .scene-object-shape { stroke-width: 2.2; }
.city-bar__restroom-hotspot .scene-object-shape { stroke-width: 2.2; }
.city-bar__context-menu {
  --menu-x: 70%;
  --menu-y: 42%;
  position: absolute;
  z-index: 8;
  left: var(--menu-x);
  top: calc(var(--menu-y) + 18px);
  width: min(230px, calc(100% - 16px));
  padding: 8px;
  transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  background: rgba(6,9,7,.90);
  box-shadow: 0 18px 48px rgba(0,0,0,.48);
  backdrop-filter: blur(14px);
}
.city-bar__context-menu[hidden] { display: none !important; }
.city-bar__context-action { width: 100%; }
.city-bar__context-action + .city-bar__context-action { margin-top: 6px; }
.city-bar-trash {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}
.city-bar-trash__item {
  position: absolute;
  left: var(--trash-left);
  top: var(--trash-top);
  width: var(--trash-width);
  aspect-ratio: 1.5 / 1;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
}
.city-bar-trash__sprite {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(.8) saturate(.8) drop-shadow(0 5px 3px rgba(0,0,0,.72));
  transition: filter .16s ease, transform .16s ease;
}
.city-bar-trash__item:hover .city-bar-trash__sprite,
.city-bar-trash__item:focus-visible .city-bar-trash__sprite {
  filter: brightness(1.15) saturate(1.02) drop-shadow(0 0 2px rgba(246,241,224,.98)) drop-shadow(0 0 8px rgba(224,204,133,.78)) drop-shadow(0 6px 4px rgba(0,0,0,.76));
  transform: translateY(-3px) scale(1.04);
}
.city-bar-dialogue {
  position: absolute;
  z-index: 12;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(56px, 8vh, 84px) clamp(14px, 3vw, 42px) clamp(22px, 4vh, 42px);
  background: linear-gradient(to top, rgba(2,4,3,.84), rgba(2,4,3,.08) 64%);
}
.city-bar-dialogue__panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  width: min(820px, calc(100% - 28px));
  max-height: 100%;
  overflow: hidden;
  padding: clamp(18px, 2.2vw, 30px);
  border: 1px solid rgba(224,204,133,.38);
  border-radius: 12px;
  background: rgba(6,9,7,.94);
  box-shadow: 0 22px 70px rgba(0,0,0,.72);
  backdrop-filter: blur(12px);
}
.city-bar-dialogue__speaker {
  margin: 0;
  color: #e4d28d;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
}
.city-bar-dialogue__copy { display: grid; gap: 9px; overflow-y: auto; padding-right: 4px; color: #e9e6d9; line-height: 1.55; overscroll-behavior: contain; }
.city-bar-dialogue__copy p { margin: 0; }
.city-bar-dialogue__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.city-bar-dialogue__action { min-height: 42px; }
.city-bar-dialogue__action:disabled { cursor: not-allowed; opacity: .44; }
.city-bar__door,
.city-bar__door:hover,
.city-bar__door:focus-visible {
  position: absolute;
  z-index: 3;
  left: 17.47%;
  top: 19.79%;
  width: 10.9%;
  height: 35.02%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  cursor: pointer;
}
.city-bar__door-map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.city-bar__door-map .scene-object-shape {
  fill: rgba(224, 204, 133, .001);
  stroke: rgba(224, 204, 133, 0);
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  transition: fill .14s ease, stroke .14s ease, filter .14s ease;
}
.city-bar__door:hover .scene-object-shape,
.city-bar__door:focus-visible .scene-object-shape {
  fill: rgba(224, 204, 133, .1);
  stroke: rgba(236, 214, 139, .92);
  filter: drop-shadow(0 0 4px rgba(226, 204, 126, .55)) drop-shadow(0 0 12px rgba(226, 204, 126, .22));
}

.city-bar-restroom__scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; border: 0; border-radius: 0; background: #090d0b; box-shadow: none; }
.city-bar-restroom__artboard {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  transform: translate(-50%, -50%);
}
.city-bar-restroom__background { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.city-bar-restroom__hotspot-map { z-index: 2; }
.city-bar-restroom__exit-hotspot .scene-object-shape { stroke-width: 2.2; }
.city-bar-restroom__stall-hotspot .scene-object-shape { stroke-width: 2.2; }

.city-bar-restroom-stall__scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; border: 0; border-radius: 0; background: #090d0b; box-shadow: none; cursor: pointer; outline: none; }
.city-bar-restroom-stall__artboard {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  transform: translate(-50%, -50%);
}
.city-bar-restroom-stall__background { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.city-bar-restroom-stall__hotspot-map { z-index: 2; }
.city-bar-restroom-stall__hole-hotspot .scene-object-shape { stroke-width: 2.2; }
.city-bar-restroom-stall__context-menu { z-index: 4; width: min(220px, 22vw); }
.city-bar-restroom-stall__work-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  pointer-events: auto;
  background: rgba(3, 5, 4, .24);
}
@media (max-width: 720px) {
  .city-bar-dialogue { padding: max(50px, env(safe-area-inset-top)) 10px max(16px, env(safe-area-inset-bottom)); }
  .city-bar-dialogue__panel { width: calc(100% - 8px); max-height: 100%; padding: 14px; }
  .city-bar-dialogue__actions { display: grid; }
  .city-bar-dialogue__action { width: 100%; }
  .city-bar-trash__item { min-width: 42px; min-height: 34px; }
}
.city-bar-restroom-stall__work-card {
  display: grid;
  gap: 10px;
  width: clamp(600px, 68vw, 1240px);
  max-width: calc(100% - 32px);
  padding: 10px;
  border: 1px solid rgba(224, 204, 133, .34);
  border-radius: 10px;
  background: rgba(6, 9, 7, .94);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .62);
}
.city-bar-restroom-stall__work-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 170px;
  overflow: hidden;
  border-radius: 7px;
  background: #020302;
}
.city-bar-restroom-stall__work-video {
  display: block;
  width: 100%;
  max-height: 58vh;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}
.city-bar-restroom-stall__work-status {
  max-width: 34ch;
  margin: 0;
  padding: 22px;
  color: rgba(236, 239, 230, .78);
  font-size: .8rem;
  line-height: 1.5;
  text-align: center;
}
.city-bar-restroom-stall__work-status[hidden] { display: none; }
.city-bar-restroom-stall__work-next { width: 100%; }
@media (min-aspect-ratio: 1672/941) {
  .city-bar__artboard,
  .city-bar-restroom__artboard,
  .city-bar-restroom-stall__artboard { width: 100%; height: auto; }
}

@media (max-width: 720px) {
  .vehicle-field-object { min-width: 90px; width: max(var(--vehicle-width), 35%); }
  .vehicle-encounter-modal__panel { grid-template-columns: 1fr; }
  .vehicle-encounter-modal__art { max-height: 230px; padding-top: 22px; }
  .vehicle-encounter-modal__copy { padding: 18px; }
  .vehicle-yard-page { width: 100vw; }
  .city-map-page { width: 100vw; }
  .city-location-page { width: 100vw; }
  .city-map__back { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); width: auto; min-height: 36px; padding: 7px 10px; font-size: .72rem; }
  .city-bar__context-menu { width: min(210px, calc(100% - 12px)); }
  .city-bar-restroom-stall__context-menu { width: min(210px, calc(100% - 12px)); }
  .city-bar-restroom-stall__work-card { width: min(84vw, 520px); }
  .vehicle-yard__car-action { bottom: 80%; width: min(250px, 88vw); }
  .vehicle-yard__service-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .vehicle-field-object__image, .vehicle-field-object__label, .vehicle-yard__door-map .scene-object-shape, .vehicle-yard__parked img, .city-map__hotspot, .city-bar__door-map .scene-object-shape { transition: none; }
}